<template>
  <view class="container">
    <!-- 表单内容 -->
    <uni-forms ref="form"  :model="formData">
      <!-- 个人信息部分 -->
      <uni-forms-item label="姓名" name="name">
        <uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
      </uni-forms-item>
      
      <uni-forms-item label="身份证号码" name="idCard">
        <uni-easyinput v-model="formData.idCard" placeholder="请输入身份证号码" />
      </uni-forms-item>

      <uni-forms-item label="手机号" name="phone">
        <uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
      </uni-forms-item>

      <!-- 店铺信息部分 -->
      <uni-forms-item label="店名" name="shopName">
        <uni-easyinput v-model="formData.shopName" placeholder="请输入店名" />
      </uni-forms-item>

      <uni-forms-item label="工商营业执照号码" name="licenseNumber">
        <uni-easyinput v-model="formData.licenseNumber" placeholder="请输入营业执照号码" />
      </uni-forms-item>

      <uni-forms-item label="经营区域" name="area">
        <uni-easyinput v-model="formData.area" placeholder="请输入经营区域" />
      </uni-forms-item>

      <uni-forms-item label="地址" name="address">
        <uni-easyinput v-model="formData.address" placeholder="请输入详细地址" />
      </uni-forms-item>

      <!-- 商家介绍 -->
      <uni-forms-item label="商家介绍" name="description">
        <textarea 
          v-model="formData.description" 
          class="textarea" 
          placeholder="请输入商家介绍"
          auto-height
        />
      </uni-forms-item>

      <!-- 图片上传部分 -->
      <uni-section title="营业执照" type="line">
        <uni-file-picker 
          v-model="formData.licensePhotos"
          fileMediatype="image" 
          limit="2"
        />
      </uni-section>

      <uni-section title="门面照片" type="line">
        <uni-file-picker 
          v-model="formData.shopPhotos"
          fileMediatype="image" 
          limit="4"
        />
      </uni-section>

      <uni-section  title="身份证正反面" type="line">
        <uni-file-picker 
          v-model="formData.idCardPhotos"
          fileMediatype="image" 
          limit="2"
		  @select="select"
		 
        />
      </uni-section>
    </uni-forms>

    <!-- 底部操作按钮 -->
    <view class="footer">
      <button class="submit-btn" @click="handleSubmit">修改</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据
const formData = ref({
  name: '张三',
  idCard: '40365236541232563',
  phone: '18893039203',
  shopName: '店小友',
  licenseNumber: '4252336467474764646',
  area: '焦作市山阳区',
  address: '山阳区迎宾路32号',
  description: '商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍',
  licensePhotos: ['https://gw.alicdn.com/imgextra/i4/O1CN01ZFAF6o1aGp4yYNoZD_!!0-rate.jpg','https://gw.alicdn.com/imgextra/i4/O1CN01xExhWC1UiPGG5OJJW_!!0-rate.jpg','https://gw.alicdn.com/imgextra/i2/O1CN01UTTvLX1OFCK9I0r8n_!!2-rate.png','https://img.alicdn.com/imgextra/i1/0/O1CN01yQxLuA2CYBTyMwt6P_!!0-tbbala.jpg'],
  shopPhotos: ['https://gw.alicdn.com/imgextra/i4/O1CN01ZFAF6o1aGp4yYNoZD_!!0-rate.jpg','https://gw.alicdn.com/imgextra/i4/O1CN01xExhWC1UiPGG5OJJW_!!0-rate.jpg','https://gw.alicdn.com/imgextra/i2/O1CN01UTTvLX1OFCK9I0r8n_!!2-rate.png','https://img.alicdn.com/imgextra/i1/0/O1CN01yQxLuA2CYBTyMwt6P_!!0-tbbala.jpg'],
  idCardPhotos: ['https://i2.hdslb.com/bfs/archive/508c063be1c223220ae2eadb1075809814649d5a.jpg']
});
const addMerchantInfo = ref({
	// 自增
		merchantId: null,
	    // 随机
		merchantCode: null,
	    //  负责人姓名
		contactName: null,
		// 身份证号
	    idCardNumber: null,
		// 营业执照编号
	    businessLicenseNumber: null,
		// 店名
	    shopName: null,
		// 手机号
	    phoneNumber: null,
		// 经营区域
	    businessArea: null,
		// 详细地址
	    detailedAddress: null,
		// 身份证正反照id（外键图片ID）
	    idCardImageId: null,
		// 营业执照照片id（外键图片ID）
	    businessLicenseImageId: null,
		// 门面照片id（外键图片ID）
	    storefrontImageId: null,
		// 经度
	    longitude: null,
		// 维度
	    latitude: null,
		// 审核状态
	    auditStatus: null,
		// 营业时间
	    businessHours: null,
		// userid
	    userId: null,
		// 店铺余额
	    shopBalance: null
})
const select = (e)=>{
	// 图片上传执行函数  未写 上传成功回调 上传失败回调
	 console.log('选择文件：', e);
	 // formData.value.idCardPhotos.push()
	 const tempFilePaths = e.tempFilePaths;
	  tempFilePaths.forEach(tempFilePath => {
	 	 console.log(tempFilePath);
	 })
	 
};

// 提交修改
const handleSubmit = async () => {
	console.log(formData.value.idCardPhotos);
  try {
    // 这里添加提交逻辑
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    });
  } catch (error) {
    console.error('提交失败:', error);
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx 30rpx 120rpx; /* 增加底部内边距 */
  min-height: 100vh;
  box-sizing: border-box; /* 重要：防止padding影响布局 */
}

.uni-forms-item {
  margin-bottom: 20rpx;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.footer {
  position: relative; /* 改为相对定位 */
  padding: 20rpx 0;
  background-color: #fff;
  
  /* 添加顶部边框线 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30rpx;
    right: -30rpx;
    height: 2rpx;
    background-color: #eee;
  }
}

.submit-btn {
  background-color: #007AFF;
  color: white;
  border-radius: 50rpx;
  margin-top: 20rpx;
}
</style>